{extend name='admin@public/content'}
{block name="style"}
<style>
    .framework-body { overflow-y: hidden;}
    .layui-card { height: 100%!important;}
    .layui-card-body { height: 100%; line-height: normal; padding: 0; overflow: hidden;}
    .pull-aside { position: absolute; position: absolute; top: 23px; left: 22px; height: 100%;min-width: 200px;box-sizing: border-box; box-shadow: 1px 0 0 rgba(0,0,0,0.05); }
    .category-view, .attr-view { padding: 10px;}
    .pull-content { margin-left: 220px; height: 100%;}
    .form-wrapper { width: auto; text-align: left; margin: 0 15px;}
    .form-view-inp .layui-input-inline { width: 516px!important; margin-right: 0;}
    .form-view-btn { width: 80px;}
    .layui-form-item { margin-bottom: 5px; }
    .search-down-wrap { text-align: left;}
    .search-down-wrap ul { width: auto;  font-size: 0;}
    .search-down-wrap ul li { display: inline-block; margin-right:15px; font-size: 13px; color: #999; position: relative; }
    .search-down-wrap ul li .clear-icon { font-size: 15px; padding: 5px; color: #d43f3a;}
    .table-view { display: flex; flex-direction: column; justify-content: space-between; height: 90%; padding: 10px; box-sizing: border-box;}
    .table-view .fore { height: 60%; overflow-y: auto; }
    .table-view .fore2 { height: 30%; overflow-y: auto; }
    .prd { overflow: hidden;}
    .prd-item { float: left; margin: 0 15px 20px; position: relative;}
    .prd-item a { text-decoration: none;color: #000;text-align: center}
    .prd-item a:hover{color:#fff;background-color: #33CBCC;}
    .prd-item-pic { display: block;}
    .prd-item-name { display: block; font-size: 16px;  padding: 6px 0;}

    .prd-item-descrit {display:none;}
</style>
{/block}
<div class="layui-card">
    <!--{notempty name='title'}-->
    <div class="layui-header notselect">
        <div class="pull-left"><span>{$title}</span></div>
        <div class="pull-right margin-right-15 nowrap">{block name="button"}{/block}</div>
    </div>
    <!--{/notempty}-->
    <div class="layui-card-body">
        {block name="content"}
        <div class="pull-left pull-aside">
            <div class="attr-view">
                <div>配方属性</div>
                <ul id="pf_attrs" class="ztree loading">
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="pull-content">
            <form class="layui-form layui-form-pane form-search" action="{:request()->url()}" onsubmit="return false" method="get">
                <div class="layui-form layui-form-pane form-search form-wrapper">
                    <div class="form-view">
                        <div class="layui-form-item layui-inline form-view-inp">
                            <div class="layui-input-inline">
                                <input name="seacrch" value="{$Think.get.seacrch|default=''}" placeholder="请输入关键词" class="layui-input">
                                <input type="hidden" name="attrs_id" id="attrs_id" value="{$Think.get.attrs_id|default=''}"  class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline form-view-btn">
                            <button class="layui-btn layui-btn-primary search_btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                    <div class="search search-down-wrap">
                        <ul>
                            {foreach name="searchattr" item="vo"}
                            <li class="tag_{$vo.id}">{$vo.name}<a href="javascript:void(0);" class="cancelTag clear-icon" data-id="{$vo.id}"><i class="fa fa-close"></i></a></li>
                            {/foreach}
                        </ul>
                    </div>
                </div>
            </form>
            <form onsubmit="return false;" data-auto="true" method="post">
                <div class="table-view">
                    <div class="searchproduct">
                        <div class="load_div">
                            <!--{empty name='list'}-->
                            <p class="help-block text-center well">没 有 记 录 哦！</p>
                            <!--{else}-->
                            <ul class="prd" lay-skin="line">
                                {foreach name="list" item="vo"}
                                <li class="prd-item">
                                    <a data-menu-node="m-30-34" data-title="编辑{$vo.name}配方" data-href="/admin/formula/edit?id={$vo.id}" target="_blank" class="topbar-btn pull-left transition active">
                                        <img src="{$vo.main_pic}" class="prd-item-pic" width="200" height="200" style="padding: 3px 3px 3px 3px;">
                                        <textarea class="prd-item-descrit">{$vo.content|raw}</textarea>
                                        <p class="prd-item-name">{$vo.name}</p>
                                        <input type="hidden" value='{$vo.id}' name='formulaId[]' class="formulaid">
                                    </a>
                                </li>
                                {if $key%4==3}
                                <li>
                                    {/if}
                                    {/foreach}
                                </li>
                            </ul>
                            {if isset($page)}<p>{$page|raw}</p>{/if}
                            <!--{/empty}-->
                        </div>
                    </div>
                </div>
            </form>
        </div>
        {/block}
    </div>
</div>
{block name="script"}
<script>
    $(function () {
        require(['jquery', 'jquery.ztree'], function () {
            var attrs_id = {$tagsArr|raw};
            var setting = {
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick : zTreeOnClick
                }
            };
            var attrs = {$attribute|raw};

            $.fn.zTree.init($("#pf_attrs"), setting, attrs);

            function zTreeOnClick(event, treeId, treeNode) {
                if (treeId == 'pf_attrs') {
                    if(!treeNode.children) {
                        if(!$('.search ul li').hasClass('tag_'+treeNode.id)) {
                            $('.search ul').append('<li class="tag_'+treeNode.id+'">' + treeNode.name + '<a href="javascript:void(0);" class="cancelTag clear-icon" data-id="'+treeNode.id+'"><i class="fa fa-close"></i></a></li>');
                            attrs_id.push(treeNode.id);
                            $("#attrs_id").val(attrs_id);
                        }
                    }
                }
            }

            $('.search').on('click', '.cancelTag',function(){
                var id = $(this).data('id');
                $('.search .tag_' + id).remove();
                for (var i = 0; i < attrs_id.length; i++) {
                    if (attrs_id[i] == id) {
                        attrs_id.splice(i, 1);
                        $("#attrs_id").val(attrs_id);
                    }
                }
            })
            // $('.searchproduct').on('click', '.load_div img', function() {
            //     var h = $(this).next('.prd-item-descrit').text();
            //     var obj = $(this).parent();
            //     layer.open({
            //         type: 1,
            //         title: '配方详情',
            //         shadeClose: true,
            //         shade: 0.8,
            //         area: ['60%', '80%'],
            //         content: h,
            //         btn: ['编辑', '关闭'],
            //         yes: function(){
            //             layer.closeAll();
            //             window.location.href = '#' + obj.data('url') + '?spm=' + obj.data('menu-node');
            //         },
            //         btn2: function(){
            //             layer.closeAll();
            //         }
            //     })
            // })
        })
    })
</script>
{/block}